import { useMemo } from 'react'
import Title from '@components/title'
import style from './index.module.less'
import OrderLine from '@components/orderLine'
import { formatDate, getFilePath, strToNum } from '@src/assets/js/tool'
import { Button } from 'antd-mobile'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'

function Main ({ data }) {
  const dispatch = useAppDispatch()
  const statement = useMemo(() => {
    return data.statement ? data.statement : ''
  }, [data])
  if (data.evidence.length === 0) {
    return <span />
  }
  return (
    <div>
      <Title title='证据材料' renderRight={() => <Button onClick={() => { dispatch(push({ element: 'editEvidence', meta: { id: '', caseid: data.id } })) }}>补充证据</Button>} />
      <div className={style.list}>
        {
          data.evidence.map((li, i) => {
            return (
              <OrderLine
                key={i}
                index={i + 1}
                value={(
                  <div className={style.inner}>
                    <div>
                      <span className={style.label}>证据名称：</span>
                      <span>{li.name}</span>
                    </div>
                    <div>
                      <span className={style.label}>证明内容：</span>
                      <span>{li.proof}</span>
                    </div>
                    <div>
                      <span className={style.label}>提交人：</span>
                      <span>{li.submittal}<span>({li.submittal_type})</span></span>
                    </div>
                    <div>
                      <span className={style.label}>提交时间：</span>
                      <span>{formatDate(strToNum(data.create_datetime), 'YYYY-MM-DD HH:mm')}</span>
                    </div>
                    {
                      li.file && li.file.length > 0 && (
                        <div className={style.files}>
                          <span className={style['files-label']}>附件：</span>
                          {li.file.map((li, i) => {
                            return (
                              <span className={style.file} key={i}>
                                <a href={getFilePath(li)} target='_blank'>{li.original_filename}</a>
                              </span>
                            )
                          })}
                        </div>
                      )
                    }
                  </div>
                )}
                third
              />
            )
          })
        }
      </div>
      {
       !!statement && (
          <div>
            <Title title='事实与理由' />
            <div className={style.content}>
              {statement}
            </div>
          </div>
        )
      }
    </div> 
  )
}

export default Main
